<template>
  <div class="h-screen flex theme-bg theme-text">
    <aside :class="['theme-surface theme-text border-r theme-border flex flex-col transition-all duration-200', collapsed ? 'w-12' : 'w-64']">
      <div class="px-3 py-3 border-b theme-border flex items-center justify-between">
        <div class="flex items-center gap-2">
          <button class="px-2 py-1 rounded hover:bg-gray-100" @click="collapsed = !collapsed">{{ collapsed ? '›' : '‹' }}</button>
          <div v-if="!collapsed" class="text-lg font-bold">问题管理</div>
        </div>
        <div v-if="!collapsed && auth.user" class="text-xs opacity-80">{{ auth.user.name }}</div>
      </div>
      <nav class="flex-1 p-2 space-y-1 text-sm">
        <RouterLink to="/" class="flex items-center gap-2 px-2 py-2 rounded hover:bg-gray-100" exact-active-class="bg-gray-100 font-semibold" active-class="font-semibold">
          <span class="w-5 text-center">🏠</span>
          <span v-if="!collapsed">仪表盘</span>
        </RouterLink>
        <RouterLink to="/issues" class="flex items-center gap-2 px-2 py-2 rounded hover:bg-gray-100" active-class="bg-gray-100 font-semibold">
          <span class="w-5 text-center">🗂️</span>
          <span v-if="!collapsed">问题</span>
        </RouterLink>
        <RouterLink to="/knowledge" class="flex items-center gap-2 px-2 py-2 rounded hover:bg-gray-100" active-class="bg-gray-100 font-semibold">
          <span class="w-5 text-center">📘</span>
          <span v-if="!collapsed">知识库</span>
        </RouterLink>
        <RouterLink to="/reviews" class="flex items-center gap-2 px-2 py-2 rounded hover:bg-gray-100" active-class="bg-gray-100 font-semibold">
          <span class="w-5 text-center">📝</span>
          <span v-if="!collapsed">复盘</span>
        </RouterLink>
        <RouterLink to="/exams" class="flex items-center gap-2 px-2 py-2 rounded hover:bg-gray-100" active-class="bg-gray-100 font-semibold">
          <span class="w-5 text-center">🧪</span>
          <span v-if="!collapsed">试卷</span>
        </RouterLink>
        <RouterLink to="/profile" class="flex items-center gap-2 px-2 py-2 rounded hover:bg-gray-100" active-class="bg-gray-100 font-semibold">
          <span class="w-5 text-center">👤</span>
          <span v-if="!collapsed">个人中心</span>
        </RouterLink>
      </nav>
      <div class="p-2 border-t theme-border">
        <button class="w-full text-left px-2 py-2 text-red-600 hover:bg-red-50 rounded" @click="logout">
          <span class="w-5 inline-block text-center">⎋</span>
          <span v-if="!collapsed">退出登录</span>
        </button>
      </div>
    </aside>
    <main class="flex-1 overflow-auto">
      <router-view />
    </main>
  </div>
</template>
<script setup>
import { RouterLink, useRouter } from 'vue-router'
import { ref } from 'vue'
import { useAuthStore } from '../stores/auth'
const auth = useAuthStore()
const router = useRouter()
const collapsed = ref(false)
const logout = () => { auth.clear(); router.replace({ name: 'login' }) }
</script>
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css";
</style>
